<template>
    <div>
        <!-- <header> -->
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
            </van-dropdown-menu>
        <!-- </header> -->
        <ul>
            <li @click="pushDetail">
                <div class="left">
                    <div class="img"><img src="img/datouxiang33@2x.png" alt=""></div>
                    <div class="message">
                        <h3>于海洋的添加课程审批</h3>
                        <p style="margin-top:0.22rem">发起人：于海洋</p>
                        <p>隶属校区/部门：研发中心</p>
                        <div class="status">待处理</div>
                    </div>
                </div>
                <div class="right">
                    2020.01.01
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value1: 0,
            option1: [
                { text: '全部', value: 0 },
                { text: '课程添加审批', value: 1 },
                { text: '课程删除审批', value: 2 },
                { text: '人员添加审批', value: 3 },
                { text: '人员删除审批', value: 4 },
                { text: '精彩视频审批', value: 5 },
            ],
        }
    },
    methods: {
        pushDetail(){
            this.$router.push({
                path:'/disposedetail'
            })
        }
    },
}
</script>
<style lang="scss" scoped>
   /deep/ .van-dropdown-menu__title--active{
       color: #2E9EFF !important;
   }
   /deep/ .van-dropdown-item__option--active{
        color: #2E9EFF !important;
   }
   /deep/ .van-dropdown-item__option--active .van-dropdown-item__icon{
       color: #2E9EFF !important;
   }
    header{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.16rem;
        box-sizing: border-box;
        border-bottom: 0.01rem solid #E7E7E7;
        img{
            width: 0.26rem;
            height: 0.26rem;
        }
        span{
            margin-left: 0.08rem;
            font-size: 0.26rem;
            color: #343434;
        }
    }
    ul{
        padding: 0 0.2rem;
        box-sizing: border-box;
        li{
            display: flex;
            // align-items: center;
            justify-content: space-between;
            padding: 0.2rem 0;
            box-sizing: border-box;
            border-bottom: 0.01rem solid #eee;
            .right{   
                font-size: 0.2rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #7F7F7F;
            }
            .left{
                display: flex;
                .img{
                    width: 0.7rem;
                    height: 0.7rem;
                    img{
                        width: 100%;
                        height: 100%;
                        vertical-align: top;
                    }
                }
                .message{
                    margin-left: 0.15rem;
                    h3{
                        font-size: 0.26rem;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #343434;
                    }
                    p{
                        font-size: 0.22rem;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #808080;
                    }
                    .status{
                        margin-top: 0.3rem;
                        font-size: 0.2rem;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FA742A;
                    }
                }
            }
        }
    }
</style>